<template>
	<view style="padding-bottom: 160rpx;">
		<view class="box">
			<view class="content" @click="tx">
				<view class="">
					<view class="c-tit">头像</view>
					<view style="color: #BFBFBF; font-size: 24rpx; margin-top: 5rpx;">使用真实头像更容易得到HR的青睐</view>
				</view>
				<view class="">
					<image style="width: 100rpx;height: 100rpx;border-radius: 50%;" :src="form.head_img" mode="aspectFill"></image>
				</view>
			</view>
			<view class="content">
				<view class="">
					<view class="c-tit">姓名</view>
					<input v-model="form.name" placeholder="请输入姓名" placeholder-style="font-size: 36rpx; color: #BFBFBF;" />
				</view>
			</view>
			<view class="content">
				<view class="">
					<view class="c-tit">性别</view>
					<input disabled='true' v-model="form.sex_type_name" placeholder="请选择性别" placeholder-style="font-size: 36rpx; color: #BFBFBF;" @click="sho=true" />
				</view>
				<view class="">
					<text style="color: #3291F8;" @click="sho=true">选择</text>
				</view>
			</view>
			<view class="content">
				<view class="">
					<view class="c-tit">出生年日</view>
					<input v-model="form.birth_day" placeholder="请选择出生年日" placeholder-style="font-size: 36rpx; color: #BFBFBF;" @click="show=true" />
				</view>
				<view class="">
					<text style="color: #3291F8;" @click="show=true">选择</text>
				</view>
			</view>
			<view class="content">
				<view class="">
					<view class="c-tit">最好学历</view>
					<input disabled='true' value="1" v-model="form.edu_type_name" placeholder="请选择最好学历" placeholder-style="font-size: 36rpx; color: #BFBFBF;" @click="sh=true" />
				</view>
				<view class="">
					<text style="color: #3291F8;" @click="sh=true">选择</text>
				</view>
			</view>
			<view class="content">
				<view class="">
					<view class="c-tit">参加工作时间</view>
					<input v-model="form.job_in" placeholder="请选择参加工作时间" placeholder-style="font-size: 36rpx; color: #BFBFBF;" @click="showw=true" />
				</view>
				<view class="">
					<text style="color: #3291F8;" @click="showw=true">选择</text>
				</view>
			</view>
			<view class="content">
				<view style="padding: 15rpx 0;">
					<view class="c-tit">现居住地</view>
					<area1 style="font-size: 32rpx; width: 690rpx;" :p_id="form.live_province_id" :c_id="form.live_area_id" @back_func_op="b2"></area1>
				</view>
			</view>
			<view class="content">
				<view class="">
					<view class="c-tit">手机号码</view>
					<input v-model="form.mobile" placeholder="请输入手机号码" placeholder-style="font-size: 36rpx; color: #BFBFBF;" />
				</view>
			</view>
		</view>
		<image-picker :hide="true" ref="imgPicker" :count="1" @success="upSuccess"></image-picker>
		<view class="dl" @click="baocun">
			<view class="dll">保存</view>
		</view>
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
		<u-calendar v-model="showw" :mode="mode" @change="changee"></u-calendar>
		<u-select mode="single-column" v-model="sho" :list="list" @confirm="confirm"></u-select>
		<u-select mode="single-column" v-model="sh" :list="listt" @confirm="confirmm"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import ImagePicker from '@/components/image-picker.vue';
	import area1 from '@/pages/my/enterprise/area'
	export default {
		components: {
			ImagePicker,
			area1
		},
		data() {
			return {
				sh:false,
				sho:false,
				list: [],
				listt: [],
				index: '',
				form: {
					name: '',
					head_img: '',
					mobile: '',
					sex_type: '',
					birth_day: '',
					edu_type: '',
					job_in: '',
					live_area_id: "",
				},
				show: false,
				showw: false,
				mode: 'date'
			}
		},
		created() {
			let self=this;
			uni.getStorage({
			    key: 'stateData',
			    success: function (res) {
			        self.stateData=res.data
					console.log(self.stateData,"静态数据")
					self.jt()
			    }
			});
		},
		onLoad() {
			this.basic()
		},
		// computed: mapState(['stateData']),
		methods: {
			jt(){
				for(let i in this.stateData.sex_type){
					this.list.push({value:i,label:this.stateData.sex_type[i]})
				}
				for(let i in this.stateData.edu_type){
					this.listt.push({value:i,label:this.stateData.edu_type[i]})
				}
			},
			confirm(e){
				console.log(e)
				this.form.sex_type=e[0].value;
				this.form.sex_type_name=e[0].label;
			},
			confirmm(e){
				console.log(e)
				this.form.edu_type=e[0].value;
				this.form.edu_type_name=e[0].label;
			},
			async baocun() {
				//console.log(this.form);return;
				const res = await this.post('/Index/User/save_user_resume', this.form);
				console.log(res)
				if(res.code==200){
					uni.showToast({
						title:'保存成功',
						duration:1000,
						icon:'none',
						success() {
							uni.navigateBack({
								
							})
						}
					})
				}else{
					uni.showToast({
						title:'保存失败',
					})
				}
				console.log(res)
			},
			async basic() {
				const res = await this.post('/Index/User/get_user_resume');
				console.log(res)
				if (res.code == 200) {
					this.form = res.data
					console.log(res.data.head_img)
					String(this.form.head_img)
				}
			},
			tx() {
				this.$refs.imgPicker.ChooseImage()
			},
			upSuccess(res) {
				console.log(res.file)
				// 选择完成图片回调返回 res.file 就是上传成功后端返回来的图片路径
				this.form.head_img = res.file;
				console.log(this.form.head_img)
				// this.editData()
			},
			change(e) {
				console.log(e);
				this.form.birth_day = e.result;
			},
			changee(e) {
				console.log(e);
				this.form.job_in = e.result;
			},
			b2(e){
				console.log("b2")
				console.log(e)
				this.form.live_province_id=e.p_id
				this.form.live_area_id=e.c_id
			}
		}
	}
</script>

<style lang="scss" scoped>
	input{
		font-size: 34rpx;
	}
	text{
		font-size: 34rpx;
	}
	.box {
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}
	.content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #bcbcbc;
		padding: 20rpx 0;
		.c-tit{
			color: #101010;
			font-size: 32rpx;
			margin-bottom: 15rpx;
		}
		input{
			font-size: 32rpx;
		}
	}

	.dl {
		width: 100%;
		padding: 30rpx;
		background: #FFFFFF;
		transform: translateX(-50%);
		position: fixed;
		bottom: 0;
		left: 50%;
		.dll {
			width: 100%;
			height: 90rpx;
			color: #FFFFFF;
			font-size: 36rpx;
			line-height: 90rpx;
			text-align: center;
			border-radius: 15rpx;
			background-color: #3291F8;
		}
	}
</style>
